﻿<%@ Page Title="" Language="C#" MasterPageFile="~/YUIAspNet.Master" AutoEventWireup="true" CodeBehind="RowFormatter.aspx.cs" Inherits="YUIAspNetDemo.DataTable.RowFormatter" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>YUIAsp.Net Controls : LiveDemo : DataTable : Row formatter</title>
    <script type="text/javascript">
        function myRowFormatter(elTr, oRecord) {
            if (oRecord.getData('Amount') > 300) {
    	        elTr.style.backgroundColor = "#777";
            } 
	        return true; 
	    };  
    </script>
    <style type="text/css">
        .sel {background-color:red}
    </style>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <h1>Row formatter</h1>
    
    <p>Using the OnClientRowFormat property, you can attach a javascript handler that gets called foreach row that's added to the DataTable.</p>
    
    <p>In the example below, items with "Amount" greater than 300 are highlighted.</p>
    
    <p>If you want to hide an entire row, depending on some client logic, you can "return false" in the OnClientRowFormat handler. Otherwise, return true.</p>
    
    <p>
    <yui:DataTable id="dt" OnClientRowFormat="myRowFormatter" runat="server">
        <Columns>
            <yui:DataTableColumn Key="DatePaid" Sortable="true" Resizeable="true" Text="Date Paid" />
            <yui:DataTableColumn Key="Amount" Resizeable="true" />
            <yui:DataTableColumn Key="PaidTo" />
            <yui:DataTableColumn Key="Remaining" />
            <yui:DataTableColumn Key="For" />
        </Columns>
    </yui:DataTable>
    </p>
</asp:Content>
